<template>
	<view class="u-rela">
		<image class="page-bg" :src="dataList.banner =='' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lx-4.png' : dataList.banner" mode="widthFix"></image>
		<view class="page-wrap">
			<!-- 标题 -->
			<div class="u-flex title">
				<text class="u-font-38 blod u-m-l-15 u-flex-1">{{ dataList.title }}</text>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png"
					mode="widthFix" @click="tonav_map"></image>
			</div>
			<div class="u-font-34 blod u-m-t-40 u-m-b-30">途径景点</div>
			<view class="tjjd-wrap">
				<div class="left u-flex u-row-center">
					<text class="text">主要景点</text>
					<div class="icon-wrap u-flex u-row-center">
						<u-icon name="arrow-right" color="#F08035" size="20"></u-icon>
					</div>
				</div>
				<scroll-view scroll-x class="img-wrap">
					<view class="grid">
						<view class="item" v-for="(item,index) in dataList.sightsList" :key="index">
							<image :src="item.thumbnail ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-14.png' :item.thumbnail"
								mode="widthFix"></image>
							<text>{{ item.title }}</text>
						</view>
						<!-- <view class="item">
							<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-14.png"
								mode="widthFix"></image>
							<text>天蓝蓝花卉基地</text>
						</view>
						<view class="item">
							<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-v-14.png"
								mode="widthFix"></image>
							<text>天蓝蓝花卉基地</text>
						</view> -->
					</view>
				</scroll-view>
			</view>
			<div class="u-font-34 blod u-m-t-40 u-m-b-30">行程介绍</div>
			<view class="desc">
				{{ dataList.description }}
			</view>
			<div class="u-font-34 blod u-m-t-40 u-m-b-30">行程路线图</div>
			<image class="img-jd u-m-t-30" :src="dataList.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-lx-8.png' : dataList.thumbnail" mode="widthFix"></image>
			<div class="desc u-m-t-40" v-html="dataList.content"></div>
		</view>
		<!-- 留言 -->
		<view class="msg-wrap">
			<view class="u-flex">
				<image class="icon-comment"
					src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-comment.png" mode="widthFix">
				</image>
				<text class="u-font-36 blod u-m-l-15">留言</text>
			</view>
			<div class="list">
				<div class="item" v-for="item in commentList" :key="item.message_id">
					<image :src="item.userinfo.avatar == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-avatar.png' : item.userinfo.avatar"
						mode="widthFix"></image>
					<div class="u-font-28 blod">{{ item.userinfo.nickname }}</div>
					<text class="u-font-24 u-tips-color">{{ item.time }}</text>
					<view class="u-font-28 u-m-t-30"> {{ item.content }} </view>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				dataList:{},
				commentList:[]
			}
		},
		onLoad(options) {
			console.log(options);
			
			// 特色路线详情
			this.get_travel_featureDetails(options.id)
		},
		methods: {
			// 特色路线详情
			get_travel_featureDetails(id){
				this.$http({
					url: this.api.travel_featureDetails,
					method: 'GET',
					data: {
						id
					}
				}).then(res=>{
					if(res.code == 1){
						this.dataList = res.data
						
						// 评论列表
						this.get_comment_index(this.dataList.id)
					}
				})
			},
			
			// 评论列表
			get_comment_index(target_id){
				this.$http({
					url:this.api.comment_index,
					method:'GET',
					data:{
						type: 3,
						target_id
					}
				}).then(res=>{
					if(res.code == 1){
						this.commentList = res.data.list
					}
				})
			},
			
			//跳转到地图
			tonav_map(){
				uni.navigateTo({
					url:`/pages/map/map?latitude=${this.dataList.latitude}&longitude=${this.dataList.longitude}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 480rpx;
		z-index: 1;
	}

	.title {
		border-bottom: 1px solid #DDDDDD;
		padding-bottom: 18rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
		}
	}

	.location {
		image {
			width: 36rpx;
			height: 36rpx;
		}
	}


	.page-wrap {
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: -50rpx;
		position: relative;
		z-index: 2;
	}

	.desc {
		font-size: 28rpx;
		line-height: 48rpx;
	}

	.img-jd {
		width: 690rpx;
		height: 460rpx;
	}

	.tjjd-wrap {
		display: flex;
align-items: center;

		.left {
			width: 80rpx;
			height: 200rpx;
			background: #F08035;
			position: relative;

			.text {
				writing-mode: vertical-rl;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				letter-spacing: 10rpx;
			}

			.icon-wrap {
				position: absolute;
				top: 84rpx;
				right: -16rpx;
				margin-left: 10rpx;
				width: 32rpx;
				height: 32rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 26, 55, 0.2);
				border-radius: 50%;
			}
		}
	.img-wrap {
		width: 600rpx;
		margin-left:26rpx;
	
		.grid {
			width: 1000rpx;
			display: grid;
			gap: 0 20rpx;
			grid-template-columns: repeat(auto-fill, 280rpx);
	
		}
	.item{
		position: relative;
		text{
			position: absolute;
			bottom:0;
			left:0;
			height: 120rpx;
			width:100%;
			background:-webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5));
			padding:0 20rpx;
			padding-top:66rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
		image {
			width: 280rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}
	}
	}

	.msg-wrap {
		background: #fff;
		padding: 30rpx;
		margin-top: 20rpx;

		.icon-comment {
			width: 36rpx;
			height: 36rpx;
		}

		.list {

			.item {
				display: grid;
				grid-template-columns: 68rpx 1fr;
				gap: 0 20rpx;
				border-bottom: 1px solid #E6E6E6;
				margin-top: 40rpx;
				padding-bottom: 60rpx;

				image {
					width: 68rpx;
					height: 68rpx;
					grid-row: 1/4;
				}

				&:last-of-type {
					border: 0;
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>
